<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.exercise.html</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        .img-nav{
            width: 590px;
            margin: 100px auto;
            position: relative;
           
        }
        .img-list a{
            position:absolute;
        }

        .dot{
            /* 
               定位和浮动不同，在浮动中。如果当前元素的上上一个兄弟元素开启浮动后，当前元素会挤到浮动元素的下背面
               如果当前元素也开启浮动，那么会与上一个浮动元素并排显示，如果当前元素不想被上面的元素浮动效果影响，可以使用
               clear:both   

               但是如果上一个兄弟元素开启了绝对定位，当前元素会挤到开启绝对定位的元素的背面，如果当前元素也开启了绝对定位,
               那么当前元素会覆盖上一个兄弟元素  这时候可以通过left,top的值来修改当前元素的位置 而且如果当前元素被兄弟元素遮盖
               可以调整z-index的属性  
             */
            position: absolute;
            top:435px;
            left:42px;
          
        }

        .dot li{
            width: 9px;
            height: 9px;
            background-color: rgb(194, 190, 190);
            float: left;
            border-radius: 50%;
            margin-right: 10px;
            border: 1px solid  transparent;
           
        }

        .dot li:hover,.dot a:first-child li{
            width: 10px;
            height: 10px;
            background-color: #ffffff;
            border: 1px solid  rgb(194, 190, 190);
        }

    </style>
</head>
<body>
    <div class="img-nav">
        <div class="img-list">
            <a href="#"><img src="./1/img/1.jpg" alt=""></a>
            <a href="#"><img src="./1/img/2.jpg" alt=""></a>
            <a href="#"><img src="./1/img/3.jpg" alt=""></a>
            <a href="#"><img src="./1/img/4.jpg" alt=""></a>
            <a href="#"><img src="./1/img/5jpg" alt=""></a>
            <a href="#"><img src="./1/img/6.jpg" alt=""></a>
            <a href="#"><img src="./1/img/7.jpg" alt=""></a>
            <a href="#"><img src="./1/img/8.jpg" alt=""></a>
        </div>

        <ul class="dot">
           <a href="#">
               <li></li>
           </a>
           <a href="#">
               <li></li>
           </a>
           <a href="#">
               <li></li>
           </a>
           <a href="#">
               <li></li>
           </a>
           <a href="#">
               <li></li>
           </a>
           <a href="#">
               <li></li>
           </a>
           <a href="#">
               <li></li>
           </a>
           <a href="#">
               <li></li>
           </a>
            
        </ul>  
    </div>
</body>
</html>